<template>
  <div class="common-body-wrapper">
    <audio controls="controls" name="media" id="myAudio" v-show="false">
      <source src="/static/mp3/tixing.mp3" type="audio/mpeg" />Your browser does not support the audio tag.
    </audio>
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isCheckbox="true"
      :isNeedTree="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <!-- <table-tree :isCheckbox="true" :isNeedTree="isTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree>-->

      <div class="common-table-wrapper">
        <div class="operateBtn">
          <div class="operate-btn-group tree-btn-group" v-if="isTree && isTree=='hide'">
            <a class="ake_btn_blue treeBtn" @click.stop.prevent="toggleTreeBox">
              <span>
                <i class="btn-icon btn-icon-left"></i>
                <span :title="selectedNode">{{selectedNode || '请选择停车场' | strFilter(10)}}</span>
              </span>
              <i class="el-icon-arrow-down"></i>
            </a>
          </div>
          <div class="rightBox">
            <a
              href="javascript:;"
              class="rightBtn ake_btn_text"
              @click="changePic()"
              v-if="isShowAllPic"
            >全部显示图片</a>
            <a href="javascript:;" class="rightBtn ake_btn_text" @click="changeVid()" v-else>全部显示视频</a>
            <a
              v-if="isPermmited('PARKING:MONITOR:GATELOG')"
              href="javascript:;"
              class="rightBtn ake_btn_text"
              @click="openGateLog()"
            >开关闸日志</a>
            <a
              v-if="isPermmited('PARKING:MONITOR:PHOTOLOG')"
              href="javascript:;"
              class="rightBtn ake_btn_text"
              @click="photoLog()"
            >拍照日志</a>
          </div>
        </div>
        <div class="videoBox">
          <template v-for="(item,index_p) in channelList">
            <div
              class="itemBox"
              :key="index_p"
              @mouseleave.prevent.stop="SwitchBoxIndex=nowIndex=100"
            >
              <h3 class="titleName">
                <span class="color"></span>
                <span
                  :title="item.parkName+'-'+item.entranceName"
                >{{item.parkName | nameFilter(item.entranceName)}}</span>
              </h3>

              <div
                class="elementBox"
                style="min-height:200px"
                @mouseover.prevent.stop="SwitchBoxIndex=index_p"
              >
                <div v-if="isNaN(Number(item.videoNum))" class="picBox">
                  <img
                    v-if="item.channelStatus"
                    style="height:200px"
                    :src="item.channelStatus.picture"
                  />
                  <img v-else style="min-height:200px" src="../../assets/img/car.png" alt="暂无图片" />
                </div>
                <div v-else class="video" style="min-height:200px">
                  <template v-if="item.showVideo">
                    <div v-show="!item.playerLoading" :id="'videoPlayer'+index_p"></div>
                    <span class="playerLoading" v-show="item.playerLoading">正在加载中...</span>
                  </template>
                  <span class="playerError" v-else>{{item.playerErrorMessage}}</span>
                </div>
                <div class="switchBox" v-if="SwitchBoxIndex==index_p">
                  <a
                    href="javaxcript:;"
                    class="btn icon-p"
                    :class="{ActiveColor:isNaN(Number(item.videoNum))}"
                    @click="chooseImg(item)"
                  ></a>
                  <a
                    href="javaxcript:;"
                    class="btn icon-v"
                    :class="{ActiveColor:!isNaN(Number(item.videoNum))}"
                    @mouseover.prevent.stop="nowIndex=index_p"
                  >{{item.videoNum}}</a>
                  <div class="videoOpionsBox" v-if="nowIndex==index_p">
                    <!-- <div class="videoOpionsBox" v-if="true"> -->
                    <label v-for="(subItem,index_s) in item.cameraList" :key="index_s">
                      <input
                        type="radio"
                        :value="index_s+1"
                        v-model="item.videoNum"
                        @click="chooseCamera(index_p,item.parkId,subItem.equipmentRecognitionCameraSeq)"
                      />
                      <span class="name">{{subItem.equipmentRecognitionCameraName}}</span>
                    </label>
                  </div>
                </div>
                <a class="pic_timeBox" v-if="isNaN(Number(item.videoNum))&&item.channelStatus">
                  <span>拍照时间：</span>
                  <span>{{item.channelStatus.pictureTime}}</span>
                </a>
                <!-- <a class="pic_timeBox" v-if="true"><span>拍照时间：</span><span>1997-09-09 12：22:23</span></a> -->
              </div>
              <div class="elementBox_btns">
                <a
                  v-if="isPermmited('PARKING:MONITOR:OPENGATE')"
                  href="javaxcript:;"
                  @click="openGate(item.id)"
                  class="bgblue"
                >开闸</a>
                <a
                  v-if="isPermmited('PARKING:MONITOR:CLOSEGATE')"
                  href="javaxcript:;"
                  @click="closeGate(item.id)"
                  class="bgred"
                >关闸</a>
                <a
                  v-if="isPermmited('PARKING:MONITOR:PHOTO')"
                  href="javaxcript:;"
                  @click="photo(item)"
                  class="bgyellow floatR icon_canmr"
                >&nbsp;&nbsp;</a>
              </div>
            </div>
          </template>
          <div class="itemBox-empty"></div>
          <div class="itemBox-empty"></div>
        </div>

        <table-pagination
          :size="total"
          :page-sizes="pageSizeList"
          :cur-page="pageNumber"
          @backData="getPagination"
        ></table-pagination>
      </div>
    </div>
    <!-- <big-pic-modal ref="bigPicModal">
              <img slot="bigImgSlot" :src="bigImgPath | setImgPath" alt="" @error="imgError('../../', 'car', $event)">
    </big-pic-modal>-->

    <!-- xaingqing-modal -->

    <basic-modal ref="switchModal" static="true" width="900">
      <h3 slot="title">开关闸日志</h3>
      <div class="ModalBody tmpdetailCSS" slot="modal-body">
        <multi-fun-table
          sortColumn
          orderType
          isNeedPrint="false"
          isSetTable="false"
          hasCheckboxCol="false"
          :theads-info="switchModalData.theadsInfo"
          :tbodys-info="switchModalData.tbodysInfo"
          :tHeightModal="switchModalData.tHeightModal"
          :fixed-cols="switchModalData.fixedCols"
        >
          <!--按钮-->

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span
                  v-else-if="'controlType' == props.prop"
                >{{ scope.row[props.prop] | controlTypeShow }}</span>
                <span
                  v-else-if="'operateStatus' == props.prop"
                >{{ scope.row[props.prop] | operateStatusShow }}</span>
                <span
                  v-else-if="'operateTime' == props.prop"
                >{{ scope.row[props.prop] | mileSecondToDate }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <!-- 弹窗modal暂时不支持分页  -->
        <table-pagination
          :size="switchModalData.total"
          :cur-page="switchModalData.pageNumber"
          @backData="getSwitchPagination"
        ></table-pagination>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('switchModal')">关闭</button>
      </div>
    </basic-modal>

    <!-- modal-2 -->
    <basic-modal ref="picModal" static="true" width="900">
      <h3 slot="title">拍照日志</h3>
      <div class="ModalBody tmpdetailCSS" slot="modal-body">
        <multi-fun-table
          sortColumn
          orderType
          isNeedPrint="false"
          isSetTable="false"
          hasCheckboxCol="false"
          :theads-info="picModalData.theadsInfo"
          :tbodys-info="picModalData.tbodysInfo"
          :tHeightModal="picModalData.tHeightModal"
          :fixed-cols="picModalData.fixedCols"
        >
          <!--按钮-->

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span
                  v-else-if="'controlType' == props.prop"
                >{{ scope.row[props.prop] | controlTypeShow }}</span>
                <span
                  v-else-if="'operateStatus' == props.prop"
                >{{ scope.row[props.prop] | operateStatusShow }}</span>
                <span
                  v-else-if="'operateTime' == props.prop"
                >{{ scope.row[props.prop] | mileSecondToDate }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <!-- 弹窗modal暂时不支持分页  -->
        <table-pagination
          :size="picModalData.total"
          :cur-page="picModalData.pageNumber"
          @backData="getPicPagination"
        ></table-pagination>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('picModal')">关闭</button>
      </div>
    </basic-modal>

    <!-- modal-3 -->
    <basic-modal ref="alarmModal" static="true" width="500">
      <h3 slot="title">提示</h3>
      <div class="ModalBody" slot="modal-body">
        <div class="alarmBox">
          <h3>
            <i class="el-icon-information" style="color:red; margin-right:10px;"></i>
            {{alarmData?alarmData.title:"null"}}
          </h3>
          <div class="alarmMsg">{{alarmData?alarmData.content:"null"}}</div>
          <div class="alarmTime"></div>
          <!--{{alarmData?alarmData.time : 0 | mileSecondToDate}}-->
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer" style="display:none">
        <!-- <button class="ake_btn ake_btn_text modal-close" @click="closed('alarmModal')">关闭</button> -->
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";
import defaultImg from "../../assets/img/car.png";
// 引进vue的js
import monitor from "./js/monitor.js";

// require('../../../node_modules/video.js/dist/video-js.min.css')
// require('../../assets/videojs/custom-theme.css')

import Vue from "vue";
// import VueVideoPlayer from 'vue-video-player'
// Vue.use(VueVideoPlayer)

// import '../../assets/videojs/zh-CN.js'
// import '../../assets/videojs/videojs-contrib-hls.min.js'
// import { videoPlayer } from 'vue-video-player'

import Chimee from "chimee";

// http://172.18.114.114:8087/2KKN611115/2KKN611115.m3u8
export default {
  mixins: [common, stardardList, invokeModal, images, monitor],
  components: {
    BigPicModal
  },
  // components: {
  //   videoPlayer
  // },
  data() {
    // const today = [
    //   new Date(moment().format("YYYY-MM-DD 00:00:00")),
    //   new Date(moment().format("YYYY-MM-DD 23:59:59"))
    // ];
    return {
      total: 0,
      isTree: "hide",
      paramName: "query_parkId",
      pageSizeList: [6],
      nowIndex: 100,
      isShowAllPic: false,
      SwitchBoxIndex: 100,
      channelList: [],
      alarmSwitch: false,
      alarmReconect: "",
      alarmReconectNumber: 0,
      alarmData: {},
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "select",
          isShow: false,

          name: "query_entranceType",
          text: "通道类型",

          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "进口", value: "1" },
            { name: "出口", value: "2" }
          ]
        },
        {
          type: "text",
          isShow: false,

          name: "query_entranceName",
          text: "通道名称",
          value: ""
        }
      ],
      switchModalData: {
        fixedCols: 0,
        tHeightModal: 360,
        list_data: {},
        pageNumber: 1,
        pageSize: 10,
        total: 100,
        theadsInfo: [
          { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
          {
            index: 1,
            isShow: false,
            prop: "controlType",
            text: "操作类型",
            minWidth: 100
          },
          {
            index: 2,
            isShow: false,
            prop: "entranceChannelName",
            text: "通道名称",
            minWidth: 140
          },
          {
            index: 3,
            isShow: false,
            prop: "operateStatus",
            text: "操作结果",
            minWidth: 120
          },
          {
            index: 4,
            isShow: false,
            prop: "operator",
            text: "操作人",
            minWidth: 180
          },
          {
            index: 5,
            isShow: false,
            prop: "operateTime",
            text: "操作时间",
            minWidth: 160
          }
        ],
        tbodysInfo: []
      },
      picModalData: {
        fixedCols: 0,
        tHeightModal: 360,
        list_data: {},
        pageNumber: 1,
        pageSize: 10,
        total: 250,
        theadsInfo: [
          { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
          {
            index: 2,
            isShow: false,
            prop: "entranceChannelName",
            text: "通道名称",
            minWidth: 140
          },
          {
            index: 3,
            isShow: false,
            prop: "operateStatus",
            text: "操作结果",
            minWidth: 180
          },
          {
            index: 4,
            isShow: false,
            prop: "operator",
            text: "操作人",
            minWidth: 180
          },
          {
            index: 5,
            isShow: false,
            prop: "operateTime",
            text: "操作时间",
            minWidth: 160
          }
        ],
        tbodysInfo: []
      }
    };
  },
  methods: {
    confirmSearch(params) {
      this.getList();
    },
    changePic() {
      var self = this;
      this.channelList.forEach(element => {
        element.videoNum = "x";
        element.playerOptions = "";
        self.chooseImg(element);
      });
      this.isShowAllPic = false;
    },
    changeVid() {
      var self = this;
      this.channelList.forEach(function(element, index) {
        element.videoNum = "1";
        if (!element.playerOptions && element.cameraList.length) {
          self.chooseCamera(
            index,
            element.parkId,
            element.cameraList[0].equipmentRecognitionCameraSeq
          );
        }
      });
      this.isShowAllPic = true;
    },
    defaultPic(event) {
      // console.log(event.target);
      // console.log(event.target.src);
      event.target.src = defaultImg;
    },
    playerReadied(player) {
      var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls;
      player.tech_.hls.xhr.beforeRequest = function(options) {
        // console.log(options)
        return options;
      };
    },
    onPlayerCanplaythrough($event) {
      console.log($event);
    }
  }
};
</script>

<style lang="less" scoped>
.alarmBox {
  padding: 20px 50px;
  h3 {
    text-align: center;
    margin-bottom: 10px;
  }
  .alarmTime {
    text-align: right;
    margin-top: 10px;
  }
}
// 树按钮
.btn-icon {
  display: inline-block;
  width: 24px;
  height: 12px;
  line-height: 12px;
}

.btn-icon-left {
  background: url(../../assets/img/ake-icon.png) no-repeat -312px center;
}

.treeBtn {
  display: flex;
  height: 30px;
  align-items: center;
  width: 260px;
  padding: 0 8px;
  letter-spacing: 2px;
  justify-content: space-between;
  border-radius: 5px 5px 0px 0px;
}

.common-table-tree-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  .operateBtn {
    height: 30px;
    margin: 8px 0;
    padding: 0 15px;
    overflow: hidden;
    div {
      display: inline-block;
    }
    .rightBox {
      height: 100%;
      float: right;
      .rightBtn {
        display: inline-block;
        height: 100%;
        border-radius: 5px;
        line-height: 30px;
        text-align: center;
        padding: 0 10px;
        color: #5588dd;
        border: 1px #5588dd solid;
        background-color: #fff;
        &:hover {
          background-color: #ddd;
        }
      }
    }
  }
  .videoBox {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 15px;
    overflow-y: scroll;
    .itemBox {
      width: 30%;
      height: fit-content;
      padding: 10px 15px;
      border-radius: 5px;
      // margin-right: 3%;
      // margin-bottom: 15px;
      min-width: 356px;

      margin: 16px;
      border: 1px #ddd solid;
      background-color: #ebebeb;
      &-empty {
        width: 30%;
        min-width: 356px;
        height: 1px;
        opacity: 0;
        margin: 16px;
      }
      .elementBox {
        position: relative;
        border: #ccc 1px solid;
        .video {
          text-align: center;
        }
        .playerError {
          margin-top: 80px;
          display: inline-block;
          color: #999;
          font-weight: bold;
          font-size: 16px;
        }
        .playerLoading {
          margin-top: 80px;
          display: inline-block;
          color: #999;
          font-weight: bold;
          font-size: 16px;
        }
        .switchBox {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          font-size: 0;
          width: 100%;
          position: absolute;
          right: 0px;
          top: 0px;

          .btn {
            display: inline-block;
            height: 35px;
            width: 45px;
            font-size: 14px;
            line-height: 35px;
            text-align: center;
            background-color: #888;
            &:hover {
              background-color: darken(#888, 10%);
            }
          }
          .icon-p {
            background-image: url("../../assets/img/icon-p.png");
            background-repeat: no-repeat;
            background-position: 50% 50%;
            &.ActiveColor {
              background-color: #5588dd;
              &:hover {
                background-color: darken(#5588dd, 10%);
              }
            }
          }
          .icon-v {
            background-image: url("../../assets/img/icon_v.png");
            background-repeat: no-repeat;
            background-position: 50% 50%;
            &.ActiveColor {
              background-color: #40e0d0;
              &:hover {
                background-color: darken(#40e0d0, 10%);
              }
            }
          }
          .videoOpionsBox {
            position: absolute;
            bottom: -10px;
            right: 0;
            font-size: 14px;
            padding: 5px 5px 5px 20px;
            background-color: #666;
            color: #fff;
            border-radius: 5px;
            margin-top: 15px;
            transform: translateY(100%);
            &::before {
              content: "";
              position: absolute;
              width: 0;
              height: 0;
              border: 9px solid;
              border-color: transparent transparent #666 #666;
              top: -5px;
              right: 5px;
              transform: rotateZ(-225deg);
            }
            label {
              display: inherit;
              position: relative;
            }
            .name {
              opacity: 0.6;
              cursor: pointer;
              &:hover {
                position: relative;
                opacity: 1;
                &::before {
                  content: "";
                  position: absolute;
                  top: 3px;
                  left: -15px;
                  width: 10px;
                  height: 10px;
                  border-radius: 10px;
                  background-color: #fff;
                }
              }
            }
            input[type="radio"] {
              position: absolute;
              opacity: 0;
              z-index: -1;
              &:checked + .name {
                position: relative;
                opacity: 1;
                &::before {
                  content: "";
                  position: absolute;
                  top: 3px;
                  left: -15px;
                  width: 10px;
                  height: 10px;
                  border-radius: 10px;
                  background-color: #fff;
                }
              }
            }
          }
        }
        .pic_timeBox {
          position: absolute;
          bottom: 0;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.4);
          color: white;
          padding: 10px;
          font-size: 14px;
        }
      }

      .elementBox_btns {
        position: relative;
        margin: 8px 0;
        .icon_canmr {
          background-image: url("../../assets/img/icon-canmr.png");
          background-repeat: no-repeat;
          background-position: 50% 50%;
        }
      }
      .titleName {
        display: flex;
        align-items: center;
        height: 28px;
        padding: 3px 0;
        .color {
          display: inline-block;
          height: 16px;
          width: 5px;
          margin-right: 10px;
          background-color: #43cd80;
        }
      }
      .picBox {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
  }
  // .table-tree-wrapper {
  //   position: absolute;
  //   height: 98%;
  //   overflow: hidden;
  //   z-index: 2;
  // }
}
</style>
